/* Estilos globales que cobijan todas las secciones*/

body{
  max-width: 100vw;
  font-size: 12pt;
  overflow: auto;
  text-align: justify;
  line-height: 1.5;
  font-family: IBM Plex Mono, sans-serif;
  font-style: normal;
background-color: palegoldenrod;
}


a{text-decoration: underline;
color: inherit;}

a:hover{
  opacity: 0.5;}

.nombre{
font-size: 10pt;
position: absolute;
width: 20%;
margin-top: 5px;
float: left;}

.año{
font-size: 10pt;
position: relative;
width: 20%;
opacity: 50%;
float: right;
margin-top: 5px;
text-align: right;}

#headervolador{color: midnightblue;
  position: relative;
  float: left;
text-align: left;
font-weight: bold;
width: 10%;
margin-left: 3%;
position: fixed;
z-index: 99;
}

#headervoladorcentro{color: grey;
  font-size: 10pt;
  position: relative;
  clear: both;
text-align: center;
font-weight: bold;
margin: auto;
width: 100%;
position: fixed;
z-index: 0;
}


#headervolador2{color: midnightblue;
text-align: right;
font-weight: bold;
position: relative;
float: right;
margin-left: 86%;
width: 10%;
position: fixed;
z-index: 96;
}

.documentosproyectos{font-style: italic;
color: blue;}

/* Fin estilos globales que cobijan todas las secciones*/


/* Estilo para índice artes*/

#sort-options{
  font-family: IBM Plex Mono;
  width: 80%;
  position: relative;
  margin-top: 15px;
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
  z-index: 95;
}

.btn {
  border: none;
  padding: 12px 16px;
  background-color: transparent;
    font-family: IBM Plex Mono, sans-serif;
  cursor: pointer;
  color: black;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: 350ms;
}

.btn:hover {
  color: blue;
  background-color: transparent;
}

.btn:focus{
  outline: none;
  background-color: none;
  color: blue;
  font-weight: bold;
}

.btn:active {
  background-color: trasnparent;
  color: pink;
}

@keyframes showing{
  from{
    opacity: 0;
  }to{
    opacity: 1;
  }
}

.filterItems {
  background-color: transparent;
  border-radius: none;
  display: none;
  overflow: hidden;
  height: 150%;
}

.filterItems > img{
  width: 100%;
}

.show {
  display: block;
  animation: 350ms showing linear;
}

.containerproyectos {
  max-height: 100%;
  max-width: 100%;
  margin: 1% 1% 1% 1%;
  padding: 1%;
  display: grid;
  grid-gap: 1%;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

#infoproy {height: 70px;}

/* Fin estilo para índice artes*/




/* break point 1550*/

@media (max-width: 1500px){

/* Estilo para proyectos artes*/

  
  #fichatecesp{
  max-width: 90%;
  margin-top: 15%;}

  #fichateceng{
    max-width: 90%;
    margin-top: 15%;}

  .containerproyecto{
    display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: " fichatecesp fichatecesp fichateceng fichateceng"
                       " descripciónesp descripciónesp descripcióneng descripcióneng"
                       "espaciofotos espaciofotos espaciofotos espaciofotos";

  grid-gap: .5rem;}



/* Fin estilo para proyectos artes*/

/* break point 900*/

@media (max-width: 900px){

/* Estilos globales que cobijan todas las secciones*/

#headervolador{
color: midnightblue;
text-align: right;
width: 91%;
position: fixed;
z-index: 1;
}

#headervolador2{
  font-size: 10pt;
color: midnightblue;
text-align: right;
width: 97%;
position: fixed;
z-index: 1;
}

#rastrerovolador2{
    font-size: 10pt;
text-align: right;
width: 93%;
transform: translateX(-93%);
position: fixed;
}

.nombre{
text-align: left;
width: 90%;}

/* Fin estilos globales que cobijan todas las secciones*/


/* Estilo para índice artes*/

.filterItems {
  position: relative;
  background-color: transparent;
  align-content: center;
  display: none;
  overflow: hidden;
  height: 200%;
  width: 100%;
}

.filterItems > img{
  width: 100%;
}

.show {
  display: block;
  animation: 350ms showing linear;
}


.btn {
  border: none;
  text-align: left;
  width: 100%;
  padding: 1% 3%;
  background-color: transparent;
  cursor: pointer;
  color: black;
  font-size: 0.8rem;
  border-radius: none;
  transition: 350ms;
}

#sort-options{
  font-family: IBM Plex Mono;
  position: relative;
  margin-top: 15px;
  padding-left: 0%;
  padding-right: 0%;
  text-align: center;
  z-index: 99;
  margin-bottom: 10%;
}

.containerproyectos {
    position: relative;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0%;
    margin-right: 0%;
    margin-top: -7%;
  padding: 0%;
  display: grid;
  grid-gap: 1%;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  overflow: none;
}

/* Fin estilo para índice artes*/